<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=93e22b34db78a1c1fd467a663ee7592f&plugin=AMap.ToolBar"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<style type="text/css">
	#mapContainer{
		margin:0;
		height:100%;
		width:100%;
		font-size:12px;
	}
	.container-div.ui-layout-center.map{
		padding-left: 15px;
		padding-right: 15px;
	}
	button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
	input#keyword {
		width: 110px;
		vertical-align: middle;
		line-height: 24px;
		height: 26px;
		border: 1px solid #bbb;
		padding: 0 4px;
	}
	div#fenYe {
		width: 100%;
		height: 25px;
	}
	input#first {
		margin-left: 45px;
	}
	input.ongImg {
		margin-left: 5px;
	}
	.YN{
		width: 200px;
		height: 50px;
	}
</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="clear.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">

<div id="mapContainer" ></div>
<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-sm-12">

			<div class="ibox float-e-margins">
				<!--<div class="ibox-title">
					<h3>联系信息</h3>

				</div>
				<div class="ibox-content">
					<p><i class="fa fa-send-o"></i> 官网：<a href="http://www.hxcoltd.com/" target="_blank">http://www.hxcoltd.com/</a>
					</p>
					<p><i class="fa fa-phone"></i> 电话：
					</p>
					<p><i class="fa fa-address-book"></i> 地址:
					</p>
				</div>-->



			</div>
		</div>

	</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script>

	$(function () {
        /**
         * 	地图同步加载。。
         */
        map = new AMap.Map('mapContainer',{
            expandZoomRange:true,
            zoom:8,	//	缩放级别[3,18]
//            zooms:[3,20],
//            center:[108.947205,34.341258]	//	西安
            center:[107.545837,33.222739]	//	万科
        });


        $.ajax({
            cache : true,
            async : false,
            type : "POST",
            url : "/assets/iLine/linePoint",
            data : {
                "byqId":null,
                "lineId": null,
                "lineName": null
			},
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                for(var i=0 ; i<data.length;i++){

                    var imgURI = "";
                    if(data[i].type=="杆塔"){
                        imgURI = "/imgs/gt.png"
                    }else if(data[i].type=="变压器"){
                        imgURI = "/imgs/byq.png"
                    }else if(data[i].type=="分支箱"){
                        imgURI = "/imgs/dlfzx.png"
                    }else if(data[i].type=="下户点"){
                        imgURI = "/imgs/xhd.png"
                    }else if(data[i].type=="表箱"){
                        imgURI = "/imgs/bx.png"
                    }else if(data[i].type=="电缆井"){
                        imgURI = "/imgs/dlj.png"
                    }else if(data[i].type=="交叉跨越"){
                        imgURI = "/imgs/jcky.png"
                    }else if(data[i].type=="同杆架设"){
                        imgURI = "/imgs/gt.png"
                    }

                    //	点位描点
                    var marker = null;
                    if(data[i].type!="同杆架设"){

                        if(data[i].type=="变压器"){
                            marker = new AMap.Marker({
                                position: [data[i].lgt,data[i].lat],//	点位坐标
                                offset: new AMap.Pixel(-20, -40),	//	相对偏移量
                                icon: new AMap.Icon({				//	显示图标设置
                                    image: imgURI,
                                    size: new AMap.Size(60, 60),	//	图片大小
                                    imageSize: new AMap.Size(60,60)
                                }),
                                label: {							 //	添加文本标注
                                    content: data[i].code,			//	点位编号
                                    offset: new AMap.Pixel(20, -30)
                                },
                                shape:new AMap.MarkerShape({		//	划定Marker的可点击区域范围
                                    coords:[0,0,40,40],
                                    type:'rect'						//	circle:圆形	poly:多边形 rect:矩形
                                }),
                            });
                        }else{
                            marker = new AMap.Marker({
                                position: [data[i].lgt,data[i].lat],//	点位坐标
                                offset: new AMap.Pixel(-20, -40),	//	相对偏移量
                                icon: new AMap.Icon({				//	显示图标设置
                                    image: imgURI,
                                    size: new AMap.Size(40, 40),	//	图片大小
                                    imageSize: new AMap.Size(40,40)
                                }),
                                label: {							 //	添加文本标注
                                    content: data[i].code,			//	点位编号
                                    offset: new AMap.Pixel(20, -30)
                                },
                                shape:new AMap.MarkerShape({		//	划定Marker的可点击区域范围
                                    coords:[0,0,40,40],
                                    type:'rect'						//	circle:圆形	poly:多边形 rect:矩形
                                }),
                            });
                        }

                        map.add(marker);
                        //	点位传送值设置
                        marker.extData = {
                            id:data[i].id,
                            type:data[i].type,
                            code:data[i].code,
                            byq_id:data[i].byqId,
                            line_id:data[i].lineId,
                            task_id:data[i].taskId,
                            is_pole:data[i].isPole,
                            pole_id:data[i].poleId
                        };
//                        marker.on("dblclick",showHtml);
                    }

//                    marker.on("dblclick",showHtml);

                    //	连线
                    for(var j=0;j<data.length;j++){

                        if(data[j].upId == data[i].id){
                            var path = [
                                new AMap.LngLat(data[i].lgt,data[i].lat),
                                new AMap.LngLat(data[j].lgt,data[j].lat)
                            ];
                            var polyline = new AMap.Polyline({
                                path: path,
                                borderWeight: 2, // 线条宽度，默认为 1
                                strokeColor: 'red', // 线条颜色
                                lineJoin: 'round' // 折线拐点连接处样式
                            });

                            //	标注档距
                            var text = new AMap.Text({
                                text:data[j].span,
                                textAlign:'center', // 'left' 'right', 'center',
                                verticalAlign:'middle', //middle 、bottom
                                draggable:false,
                                cursor:'pointer',
                                position: [(data[i].lgt+data[j].lgt)/2,(data[i].lat+data[j].lat)/2],
                                offset: new AMap.Pixel(-10, -10)
                            });
                            map.add(polyline);
                            map.add(text);
                        }


                    }

                }

                //	拉线描点
                for(var k=0 ; k<data.length;k++){
                    if(data[k].pullNum !=null){
                        if(data[k].pullNum > 0){

                            var marker_pull = new AMap.Marker({
                                position: [data[k].lxLgt,data[k].lxLat],//	点位坐标
                                offset: new AMap.Pixel(-20, -40),	//	相对偏移量
                                icon: new AMap.Icon({				//	显示图标设置
                                    image: "/imgs/lx.png",
                                    size: new AMap.Size(40, 40),	//	图片大小
                                    imageSize: new AMap.Size(40,40)
                                }),
                            });

                            map.add(marker_pull);
                        }
                    }
                }
            }
        });

    })




    /**
     * 	显示所有线路地理走向图
     */
    function zOnClick(event,treeId, treeNode) {



//        var lineId;
//        var lineName;
//        //	如果所选是变压器，则线路id和名称为空
//        if(treeNode.level==0 || treeNode=='undefined'){
//            lineId = "";
//            lineName = "";
//        }else{// 低压线路主线或支线
//            lineId = treeNode.id;
//            lineName = treeNode.name;
//        }

        $.ajax({
            cache : true,
            async : false,
            type : "POST",
            url : ctx + "assets/iLine/linePoint",
            data : {
//                "lineId": lineId,
//                "lineName": lineName
            },
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
//                map.clearMap();	//	清除所有覆盖物
//                lxArray.splice(0,lxArray.length)
//                spanArray.splice(0,spanArray.length);
                for(var i=0 ; i<data.length;i++){

                    var imgURI = "";
                    if(data[i].type=="杆塔"){
                        imgURI = "/imgs/gt.png"
                    }else if(data[i].type=="变压器"){
                        imgURI = "/imgs/byq.png"
                    }else if(data[i].type=="表箱"){
                        imgURI = "/imgs/bx.png"
                    }else if(data[i].type=="电缆井"){
                        imgURI = "/imgs/dlj.png"
                    }else if(data[i].type=="交叉跨越"){
                        imgURI = "/imgs/jcky.png"
                    }

                    //	点位描点
                    var marker = new AMap.Marker({
                        position: [data[i].lgt,data[i].lat],//	点位坐标
                        offset: new AMap.Pixel(-20, -40),	//	相对偏移量
                        icon: new AMap.Icon({				//	显示图标设置
                            image: imgURI,
                            size: new AMap.Size(40, 40),	//	图片大小
                            imageSize: new AMap.Size(40,40)
                        }),
                        label: {							 //	添加文本标注
                            content: data[i].code,			//	点位编号
                            offset: new AMap.Pixel(20, -30)
                        },
                        shape:new AMap.MarkerShape({		//	划定Marker的可点击区域范围
                            coords:[0,0,40,40],
                            type:'rect'						//	circle:圆形	poly:多边形 rect:矩形
                        }),
                    });

                    map.add(marker);

                    //	点位传送值设置
                    marker.extData = {
                        id:data[i].id,
                        type:data[i].type,
                        code:data[i].code,
                        byq_id:data[i].byqId,
                        line_id:data[i].lineId,
                        task_id:data[i].taskId
                    };

                    marker.on("dblclick",showHtml);

                    //	连线
//                        if(data[i].lowerId != null){

                    for(var j=0;j<data.length;j++){

//								if(data[i].lowerId == data[j].id && data[j].upId == data[i].id){
                        if(data[j].upId == data[i].id){
                            var path = [
                                new AMap.LngLat(data[i].lgt,data[i].lat),
                                new AMap.LngLat(data[j].lgt,data[j].lat)
                            ];
                            var polyline = new AMap.Polyline({
                                path: path,
                                borderWeight: 2, // 线条宽度，默认为 1
                                strokeColor: 'red', // 线条颜色
                                lineJoin: 'round' // 折线拐点连接处样式
                            });

                            //	标注档距
                            var text = new AMap.Text({
                                text:data[j].span,
                                textAlign:'center', // 'left' 'right', 'center',
                                verticalAlign:'middle', //middle 、bottom
                                draggable:false,
                                cursor:'pointer',
                                position: [(data[i].lgt+data[j].lgt)/2,(data[i].lat+data[j].lat)/2],
                                offset: new AMap.Pixel(-10, -10)
                            });
                            map.add(polyline);
                            map.add(text);
//                            spanArray.push(text);
                        }


                    }
//						}

                }

                //	拉线描点
                for(var k=0 ; k<data.length;k++){
                    if(data[k].pullNum !=null){
                        if(data[k].pullNum > 0){

                            var marker_pull = new AMap.Marker({
                                position: [data[k].lxLgt,data[k].lxLat],//	点位坐标
                                offset: new AMap.Pixel(-20, -40),	//	相对偏移量
                                icon: new AMap.Icon({				//	显示图标设置
                                    image: "/imgs/lx.png",
                                    size: new AMap.Size(40, 40),	//	图片大小
                                    imageSize: new AMap.Size(40,40)
                                }),
                            });

                            map.add(marker_pull);
//                            lxArray.push(marker_pull);
                        }
                    }

                }



            }
        });
    }




</script>
</body>
</html>
